<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap-responsive.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/style.css}" />
    <script type="text/javascript" th:src="@{/Hospital/Js/jquery.js}"></script>
    <!--<script type="text/javascript" th:src="../Js/jquery.sorted.js"></script>-->
    <script type="text/javascript" th:src="@{/Hospital/Js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/ckform.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/common.js}"></script>
    <script th:src="@{/Hospital/layer/layer.js}"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form method="post" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">角色名称</td>
            <td>
                <input type="text" name="title" id="title"/>
            </td>
        </tr>
        <tr>
            <td class="tableleft">状态</td>
            <td>
                <input type="radio" name="status" value="0" checked/> 启用
                <input type="radio" name="status" value="1"/> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">权限</td>
            <td>
                <div id="tbody">
                    <!--展示数据-->
                </div>
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button class="btn btn-primary" onclick="addInfo()" type="button">添加</button> &nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    $(function () {
        $(':checkbox[name="group[]"]').click(function () {
            $(':checkbox', $(this).closest('li')).prop('checked', this.checked);
        });

		$('#backid').click(function(){
				window.location.href="index";
		 });
    });
</script>

<script>
    //默认加载方法
    $(function (){
        getMenuList();

    })

    function getMenuList(){
        $.get("menuList",null,function (data){
            let menuList = data.list;
            //展示内容
            let itemList = "";
            menuList.forEach(function (menu,index){
                let id = menu.m_id;
                let name = menu.m_chineseName;

                let item = '<ul>' +
                    '<label class="checkbox inline">' +
                    '<input type="checkbox" name="group" value="'+id+'"/>'+name+''+
                    '</label>' +
                    '</ul>';

                itemList +=item;
            })
            //放入标签中展示
            $("#tbody").html(itemList);
        })
    }

    //角色唯一性验证,鼠标移除输入框触发函数
    $("#title").blur(function (){

        let roleName = $("#title").val();

        if (roleName.trim() === ""){
            layer.msg("角色名不能为空！")
        }else {
            $.get("compare",{roleName:roleName},function (data){
                //将服务器回复的结果进行显示
                layer.msg(data.msg);
            })
        }

    })



    //获取权限资源的选中的数据
    function addInfo(){
        let allMenu = document.getElementsByName("group");
        let ids = [];
        let roleName = $("#title").val();
        let roleStatus = $("input:radio:checked").val();

        allMenu.forEach(function (menu,index){
            if (menu.checked){
                ids.push(menu.value);
            }
        })

        //很关键，对数据序列化，传给服务端
        let ids1 = JSON.stringify(ids);

        if(confirm("确认添加?")){
            //前端确认添加后，后端进行数据处理
            //先使用layer,弹出load（提示加载中...）
            const windowId = layer.load();//获取加载框
            $.post("add",{roleName:roleName,roleStatus:roleStatus,ids:ids1},function (data){

                //关闭load窗口
                layer.close(windowId);
                //将服务器回复的结果进行显示
                layer.msg(data.msg);
                if (data.status === 1){
                    //成功后跳转页面
                    window.location.href="index";

                }

            })
        }
    }



</script>